<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/common.js"></script>
		<script type="text/javascript">
		    mui.init(); 
		
			var ws=null,wo=null;
			var em=null,map=null,pcenter=null;
			// H5 plus事件处理
			function plusReady(){ 
				if(!em||ws){return};
				// 获取窗口对象
				ws=plus.webview.currentWebview();
				wo=ws.opener();
				//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
				pcenter = new plus.maps.Point(87.6067,43.8479); 
				setTimeout(function(){
					map=new plus.maps.Map("map");
					map.centerAndZoom(pcenter,14);
					map.showZoomControls( true );
					createMarker();
					// 创建子窗口
					createSubview();
				},300);
				// 显示页面并关闭等待框
			    ws.show("pop-in");
			}
			
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready",plusReady,false);
			}
			// DOMContentloaded事件处理
			document.addEventListener("DOMContentLoaded",function(){
				em=document.getElementById("map");
				window.plus&&plusReady();
			},false);
			function userLocation(){
				map.showUserLocation( true );
				map.getUserLocation(function(state,pos){
					if(0==state){
						map.setCenter(pos);
					}
				});
			}
			function createMarker(){
				//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
				var marker=new plus.maps.Marker(new plus.maps.Point(87.606674,43.847926));
				marker.setIcon("../../images/logo.png");
				marker.setLabel("二十六里铺基站");
				var bubble = new plus.maps.Bubble("二十六里铺基站");
				marker.setBubble(bubble);
				marker.onclick = function ( marker  ) {
	                  mui.openWindow({ url: 'jzdetails.html', id:'jzdetails.html'});
	                  ws.close(); 
                } 
				map.addOverlay(marker); 
				
				var marker1=new plus.maps.Marker(new plus.maps.Point(87.586323,43.823703));
				marker1.setIcon("../../images/logo.png");
				marker1.setLabel("二十六里铺基站");
				var bubble1 = new plus.maps.Bubble("二十六里铺基站");
				marker1.setBubble(bubble1);
				marker1.onclick = function ( marker  ) {
	                mui.openWindow({ url: 'jzdetails.html', id:'jzdetails.html'});
	                ws.close(); 
                } 
				map.addOverlay(marker1); 
			}
			function createSubview(){
				// 创建加载内容窗口
				var topoffset='44px';
				if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
					topoffset=(Math.round(plus.navigator.getStatusbarHeight())+44)+'px';
				}
				var wsub=plus.webview.create('jzmap_sub.html','jzmap_sub.html',{top:topoffset,height:'60px',position:'absolute',scrollIndicator:'none',background:'transparent'});
				ws.append(wsub);
			}
			function resetMap(){
				//map.centerAndZoom(pcenter,12);
				map.reset();
			}



		</script>
		<link rel="stylesheet" href="../../css/common.css" type="text/css" charset="utf-8"/>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 45px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
.ipos {
	background: no-repeat center center url();
	background-size: 50px 44px;
}		</style>
	</head>
	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back();"></div>
			<div class="nvtt">站点地图</div>
			<div class="nvbt ipos" onclick="userLocation();"></div>
		</header>
		<div id="map">地图加载中...</div>
	</body>
	<script type="text/javascript" src="../../js/immersed.js" ></script>
</html>